<template>
  <Dialog ref="dialog" width="1000" :title="isUpdate ? '用户信息' : '创建用户'">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      status-icon
    >
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="登录账号" prop="phone" class="mb20">
            <el-input
              v-model="ruleForm.phone"
              :disabled="ruleForm.id ? true : false"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="考生性别" prop="sex" class="mb20">
            <el-radio-group
              v-model="ruleForm.sex"
              :disabled="ruleForm.id ? true : false"
            >
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="考生民族" prop="name" class="mb20">
            <!-- 解决控制台报错 -->
            <el-select
              v-model="ruleForm.nation"
              placeholder="选择民族"
              size="large"
              style="width: 240px"
              :disabled="ruleForm.id ? true : false"
            >
              <el-option
                v-for="(item, index) in clanList"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="考生姓名" prop="nick" class="mb20">
            <el-input
              v-model="ruleForm.nick"
              :disabled="ruleForm.id ? true : false"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="高考省份" prop="s_province" class="mb20">
            <el-select
              v-model="ruleForm.province"
              placeholder="选择省份"
              size="large"
              style="width: 240px"
              :disabled="ruleForm.id ? true : false"
            >
              <el-option
                v-for="(item, index) in province"
                :key="item.val"
                :label="item.name"
                :value="item.val"
                @click="onClickSelectProvince(item)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="高考年份" prop="graduate_time" class="mb20">
            <el-select
              v-model="ruleForm.graduate_time"
              placeholder="选择年份"
              size="large"
              style="width: 240px"
              :disabled="ruleForm.id ? true : false"
            >
              <el-option
                v-for="(item, index) in gaoKaoYear"
                :key="item.val"
                :label="item.name"
                :value="item.val"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学校地区" prop="s_province" class="mb20">
            <el-select
              v-model="ruleForm.s_province"
              placeholder="选择省份"
              size="large"
              style="width: 240px"
              disabled
            >
              <el-option
                v-for="(item, index) in arealist"
                :key="item.val"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="" class="mb20">
            <el-select
              v-model="ruleForm.s_city"
              placeholder="选择市"
              size="large"
              style="width: 240px"
              @change="citychange"
            >
              <el-option
                v-for="(item, index) in cityList"
                :key="item.code"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="" class="mb20">
            <el-select
              v-model="ruleForm.s_district"
              placeholder="选择区"
              size="large"
              style="width: 240px"
            >
              <el-option
                v-for="(item, index) in areaDateval"
                :key="item.code"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="学校名称" class="mb20">
            <el-input v-model="ruleForm.s_school" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="父亲" class="mb20">
            <el-input v-model="ruleForm.f_name" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电话" class="mb20">
            <el-input v-model="ruleForm.f_phone" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职业" class="mb20">
            <el-input v-model="ruleForm.f_career" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="母亲" class="mb20">
            <el-input v-model="ruleForm.m_name" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电话" class="mb20">
            <el-input v-model="ruleForm.m_phone" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职业" class="mb20">
            <el-input v-model="ruleForm.m_career" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" class="mb20">
            <el-input v-model="ruleForm.remark" type="textarea" :rows="5" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider />
      <div class="right">
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          >保存</el-button
        >
      </div>
    </el-form>
  </Dialog>
</template>
<script setup>
import Dialog from '@/components/Dialog/Dialog.vue';
import { ref, reactive } from 'vue';
import { userCreate, userGet } from '@/api/manage/manage.js';
import clanList from '@/utils/clan.js';
import { getAreaChilds } from '@/api/leader/Filling.js';

const emit = defineEmits(['refreshUserList']);

// 解构数据
const { province, gaoKaoYear } = defineProps({
  province: {
    type: Array, // 接收的参数类型
    default: [], //默认值
  },
  gaoKaoYear: {
    type: Array, // 接收的参数类型
    default: [], //默认值
  },
});

const rules = reactive({
  phone: [
    {
      required: true,
      message: '请输入手机号',
      trigger: 'blur',
    },
  ],
  nick: [
    {
      required: true,
      message: '请输入姓名',
      trigger: 'blur',
    },
  ],
  sex: [
    {
      required: true,
      message: '请选择性别',
      trigger: 'change',
    },
  ],
  s_province: [
    {
      required: true,
      message: '请选择省份',
      trigger: 'change',
    },
  ],
  graduate_time: [
    {
      required: true,
      message: '请选择高考年份',
      trigger: 'change',
    },
  ],
});
const ruleFormRef = ref();

const { proxy } = getCurrentInstance();
const arealist = ref([]); // 省
const cityList = ref([]); // 市
const areaDateval = ref([]); // 市
const dialog = ref(null);
const ruleForm = ref({});
const isUpdate = ref(false); // 是否为修改用户

/**
 * 市区变更
 * @param {string} val 市名称
 */
function citychange(val) {
  const dateinfo = cityList.value.find((item) => item.name === val);
  areaDateval.value = dateinfo.childs;
  ruleForm.value.s_district = '';
}

/**
 * 省份变更
 * @param {Object} item 省数据
 */
function onClickSelectProvince(item) {
  let arr = item.name.split(' - ');
  ruleForm.value.pid = item.val;
  ruleForm.value.province = arr[1] || '';
  ruleForm.value.s_province = arr[1] || '';
  ruleForm.value.s_city = ''; // 选中当前市区
  ruleForm.value.s_district = '';

  getAreaChilds({ pid: item.val }).then((res) => {
    cityList.value = res.data['0']['childs'];
  });
}

// 获取用户详情
function userGetDate(val) {
  const data = {
    id: val.id,
    phone: val.phone,
  };
  userGet(data).then((res) => {
    if (res.code === 20000) {
      ruleForm.value = res.data;
    }
  });
}

// 点击取消
function resetForm() {
  dialog.value.closeChange();
}

// 点击确定
function submitForm(ruleFormRef) {
  ruleFormRef.validate((valid) => {
    if (valid) {
      userCreate(ruleForm.value).then((res) => {
        if (res.code === 20000) {
          proxy.$modal.msgSuccess(ruleForm.value.id ? '修改成功' : '添加成功');
          emit('refreshUserList');
          resetForm();
        }
      });
    }
  });
}

function openChange(val) {
  dialog.value.openChange();
  if (val) {
    isUpdate.value = true;
    userGetDate(val);

    if (val.pid) {
      getAreaChilds({ pid: val.pid }).then((res) => {
        cityList.value = res.data['0']['childs'];
      });
    }
  } else {
    isUpdate.value = false;
    ruleForm.value = {};
  }
}

defineExpose({
  openChange,
});
</script>
